<template>
  <div class="res_form">
    <el-container style="padding: 0;">
      <el-header class="header">
        <span style="font-size: 30px;">注册</span>
        <span>已有账号？<router-link class="link" to="/loginForm">点此登录</router-link></span>
      </el-header>
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="registerForm" class="demo-ruleForm" validate status-icon
          label-width="70px">
          <el-form-item label="邮箱" prop="account_number">
            <el-input type="email" v-model="ruleForm.account_number" placeholder="请输入邮箱" prefix-icon="el-icon-user"
              autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" prefix-icon="el-icon-lock"
              :show-password="true" clearable show-password-icon></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" placeholder="请再次输入密码" v-model="ruleForm.checkPass" prefix-icon="el-icon-lock"
              :show-password="true" clearable show-password-icon></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="checkcode">
            <el-input placeholder="请输入验证码" v-model="checkcode" clearable maxlength="6">
              <template slot="append"><span @click="code()">验证码</span></template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px;">
            <el-button type="primary" class="submit" @click="submitForm('registerForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { reg } from '@/api/index'
export default {
  name: 'KodaiRegisterForm',
  data () {
    var validatepass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.password !== this.ruleForm.checkPass) {

          callback(new Error('两次密码不同!'));
        }
        callback();
      }
    };
    // var validatepass3 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入验证码'));
    //   } else if (this.ischeckcode !== this.checkcode) {
    //     callback(new Error('验证码错误!'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      checkcode: '',
      ischeckcode: '2222',
      ruleForm: {
        account_number: '',
        password: '',
        checkPass: ''
      },
      rules: {
        account_number: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }, { min: 8, max: 16, message: '长度在 8到 16 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatepass2, trigger: 'blur' },
        ],
        checkcode: [

        ]
      }
    };
  },

  mounted () {

  },
  methods: {
    submitForm (registerForm) {

      this.$refs[registerForm].validate(async (valid) => {
        if (valid) {
          if (this.checkcode != this.ischeckcode) {
            this.showMessage.call(this, 'error', '验证码错误');
          } else {
            // 显示加载动画
            let loading = this.$loading({ lock: true, text: "注册中", background: "rgba(0, 0, 0, 0.7)" });
            try {
              // 调用注册函数进行用户注册，并等待结果返回
              const res = await reg(this.ruleForm)
              // 根据注册结果的 code 值判断注册是否成功
              if (res.data.code === 200) {
                // 显示注册成功的消息，并跳转到登录页面
                this.showMessage.call(this, 'success', '注册成功');
                this.$router.push('/loginForm');
              } else {
                // 显示注册失败的消息，并提示错误原因
                this.showMessage.call(this, 'error', '注册失败：' + res.data.msg);
              }
            } catch (err) {
              // 显示注册失败的消息，并提示错误原因
              this.showMessage.call(this, 'error', '注册失败' + err.message);
            } finally {
              // 关闭加载动画
              loading.close();
            }
          }
        } else {
          // 显示表单验证失败的消息，并返回false
          this.showMessage.call(this, 'error', '注册失败，按要求填写');
          return false;
        }
      });
    },
    resetForm (loginForm) {
      this.$refs[loginForm].resetFields();
    },
    code () {
      // 生成 1000 到 9999 之间的随机整数
      const code = Math.floor(Math.random() * 9000 + 1000)
      this.ischeckcode = code
      this.$notify({
        title: '验证码为：' + code,
        type: 'success',
        offset: 50,
        duration: 5000
      });

    }
  }

};
</script>

<style lang="scss" scoped>
.res_form .header {
  display: flex;
  color: #000;
  justify-content: space-between;
  align-items: center;

}

.link {
  text-decoration: none;
  color: #005980;
}

.link_paw {
  float: right;
}

.submit {
  width: 100%;
}
</style>